<template>
	<view>
		<u-navbar placeholder :autoBack="true" title="积分核销"></u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight, backgroundColor: '#f5f5f5'}">
			<template v-if="isShow === 1">
				<view style="padding: 32rpx;" v-if="detail.id">
					<view style="padding: 32rpx;background-color: #fff;border-radius: 8rpx;">
						<view style="font-size: 36rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;">
							<text>兑换详情</text>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<u--image :showLoading="false" :src="detail.goodsImage && detail.goodsImage.split(',')[0]" width="160rpx" height="160rpx"></u--image>
							</view>
							<view class="detail-cell-r" style="padding: 16rpx 0 16rpx 16rpx;">
								<view>
									<text style="font-weight: bold">{{detail.goodsName}}</text>
								</view>
								<view style="height: 32rpx"/>
								<view>
									<text :style="{color: appColor}">x1</text>
								</view>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>兑换商家:</text>
							</view>
							<view class="detail-cell-r">
								<text>{{detail.store}}</text>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>兑换地点:</text>
							</view>
							<view class="detail-cell-r">
								<text>{{detail.address}}</text>
							</view>
						</view>
						<view class="detail-cell">
							<view class="detail-cell-l">
								<text>核销状态:</text>
							</view>
							<view class="detail-cell-r">
								<text style="color: #f40215;">{{detail.status_dictText}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view style="padding: 32rpx;" v-else>
					<u-empty
					    mode="search"
						icon="http://cdn.uviewui.com/uview/empty/search.png"
					>
					</u-empty>
				</view>
			</template>
			<template v-else>
				<view style="height: 160rpx;"/>
				<view style="display: flex;justify-content: center;align-items: center;">
					<u-icon v-if="isShow === 2" size="66" :color="appColor" name="checkmark-circle-fill"></u-icon>
					<u-icon v-else-if="isShow === 3" size="66" color="#f40215" name="close-circle-fill"></u-icon>
				</view>
				<view style="height: 60rpx;"/>
				<view class="pay-title" v-if="isShow === 2">核销成功</view>
				<view class="pay-title" v-else-if="isShow === 3">核销失败</view>
				
			</template>
		</scroll-view>
		<view class="good-detail-bootom">
			<view style="margin: 0 16rpx;height: 100%;width: calc(100vw - 32rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-r">
					<u-button :throttleTime="300" @click="save" :color="appColor" :text="isShow === 1 ? '确认核销' : '继续核销'" shape="circle"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions, mapState} from 'vuex';
	import {addPointInfo, getPointInfo} from '@/api/home.js';
	export default {
		data() {
			return {
				isShow: 1
			}
		},
		computed: {
			...mapState(['detail']),
			appColor() {
				return this.appPrimaryColor || '#e1251b'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		methods: {
			...mapActions(['setDetail']),
			continuCheck() {
				const that = this;
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: function(res) {
						if (res.result) {
							try{
								const result1 = JSON.parse(res.result);
								that.$cuLoading('查询中...').then(() => {
									that.isShow = 1;
									getPointInfo({recordIds: result1.id}).then((res) => {
										const {code, success, result} = res;
										if(code === 200 && success) {
											if(result.length === 1) {
												that.setDetail({detail: result[0]});
											} else {
												that.setDetail({});
											}
										} else {
											that.setDetail({});
										}
									}).finally(() => {
										uni.hideLoading();
									});
								})
							}catch(e){
								that.$cuTip('非正常二维码');
								//TODO handle the exception
							}
						}
					}
				});
			},
			save() {
				if(this.isShow === 1) {
					const {id} = this.detail;
					addPointInfo({recordIds: id}).then(res => {
						const {message, code} = res;
						if(code === 200) {
							this.isShow = 2;
							this.$cuTip('核销成功');
						} else {
							this.isShow = 3;
							this.$cuTip(message);
						}
					})
				} else {
					this.continuCheck();
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.pay-title {
		font-size: 32rpx;
		color: #000;
		text-align: center;
	}
	.parking-top {
		height: 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.detail-cell {
		display: flex;
		font: size 28rpx; 
		color: #333;
		margin-bottom: 32rpx;
		&:last-child {
			margin-bottom: 0rpx;
		}
		.detail-cell-l {
			width: 160rpx;
		}
		.detail-cell-r {
			flex: 1;
		}
	}
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 iOS>11.2*/
		box-sizing: content-box;
	
		.good-detail-bootom-r {
			flex: 1;
			text-align: right
		}
	}
</style>
